<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>推广中心</title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/page.css">
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/media.js"></script>
		<script src="../js/common.js"></script>
		<style>
			.Promotion-center li.active .bt {
				display: block;
			}
			
			.bd-0 {
				display: none;
			}
			
			.active {
				display: block;
			}
			
			.box {
				width: 2.45rem;
				height: .4rem;
				background: rgba(18, 18, 18, 1);
				color: #fff;
				justify-content: space-around;
				align-items: center;
				font-size: .12rem;
				position: absolute;
				top: 1.5rem;
				left: .6rem;
				border-radius: 5px;
			}
			
			.box:after {
				content: '.';
				color: transparent;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 15px 10px 0 10px;
				border-color: rgba(18, 18, 18, 1) transparent transparent transparent;
				position: absolute;
				bottom: -0.15rem;
			}
			
			.pss {
				position: absolute;
				right: 13px;
				font-size: 12px;
				color: #666;
				bottom: .1rem;
				left: 90px;
			}
			
			.Promotion-center li>span {
				padding-left: 77px;
				text-align: left;
				box-sizing: border-box;
			}
			
			.fh {
				font-size: 12px;
				color: #E73B3B;
			}
			
			.bigprice {
				color: #E73B3B;
				font-size: .24rem;
			}
		</style>
	</head>

	<body>
		<!--头部-->
		<div class="public-header flex">
			<!--<span class="public-header-left-search"></span>-->
			<span class="public-header-left-back"></span>
			<span class="public-header-center">推广中心</span>

			<span class="public-header-right">
           <!-- <a href="New-coupons.html" style="color: #fff;">新建</a>-->
        </span>
		</div>

		<!--正文-->
		<div class="Promotion-center bc-gray">
			<div class="hd flex">
				<a href="javascript:;" class="active">有效的</a>
				<a href="javascript:;">失效的</a>
			</div>
			<div class="bd">
				<div class="bd-1 bd-0 active">
					<ul>
						<li v-for='item in use'>
							<div class="img"></div>
							<!--<p class="pss">剩余{{item.number}}张</p>-->

							<!--<span> <i style="font-size: 12px;">可优惠</i><i style="font-size: 24px;color: #fa4535;">￥{{item.couponMoney}}</i></span>-->
							<span style="font-size: 18px;color: #5F3104;padding-left: 103px;box-sizing: border-box">{{item.couponName}}</span>
							<p class="nn">
								<span class="small">
                                <!--剩余{{item.number}}张-->
                                <span>满{{item.useCondition}}可优惠</span>
								<span class="fh">￥</span>
								<span class="bigprice">{{item.couponMoney}}</span>
								<!---->
								</span>
							</p>
							<p class="bt">
								有效期:{{item.validData}}前
							</p>
						</li>

					</ul>

				</div>
				<div class="bd-2 bd-0">
					<ul>
						<li v-for='item in unuse' class="active">
							<div class="img"></div>
							<!--<p class="pss">剩余{{item.number}}张</p>-->
							<span style="font-size: 18px;color: #5F3104;padding-left: 103px;box-sizing: border-box">{{item.couponName}}</span>
							<p class="nn">
								<span class="small">可优惠</span><em>￥</em><span class="big">{{item.couponMoney}}</span>
							</p>
							<p class="bt">
								有效期至:{{item.validData}}前
							</p>
						</li>
					</ul>
				</div>
			</div>

		</div>

		<script>
			$(function() {
				var isPageHide = false;
				window.addEventListener('pageshow', function() {
					if(isPageHide) {
						window.location.reload();
					}
				});
				window.addEventListener('pagehide', function() {
					isPageHide = true;
				});

				$('.hd a').click(function() {
					var index = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
					$('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
				})

			})
		</script>
		<script src='../js/vue.js'></script>
		<script src='../js/vue-resource.min.js'></script>
		<script>
			new Vue({
				el: 'body',
				data: {
					use: [],
					unuse: []
				},
				ready: function() {
					this.$http.get(base_url + 'ZITAOHUI/coupon', {
						params: {
							store_id: sessionStorage.s_id
						}
					}).then(
						function(data) {
							//console.log(data);
							var use = data.data.extend.data.expired;
							var unuse = data.data.extend.data.unExpired;

							for(let i = 0; i < use.length; i++) {
								let time = new Date(use[i].endTime);
								//console.log(new Date(use[i].endTime));
								use[i].validData = parseInt(time.getMonth() + 1) + '.' + time.getDate()
							}
							for(let i = 0; i < unuse.length; i++) {
								let time = new Date(unuse[i].validData);
								//console.log(new Date(unuse[i].validData));
								unuse[i].validData = parseInt(time.getMonth() + 1) + '.' + time.getDate()
							}
							this.$set('use', use);
							this.$set('unuse', unuse);
						},
						function() {

						}
					)
				}
			})
		</script>
	</body>
</html>